<template>
	<view class="page">
		<!-- 轮播图 start -->
		<swiper class="carousel" circular :indicator-dots="true" :autoplay="true">
			<!-- 动态展示 -->
			<!-- 	<swiper-item v-for="item in carouselList" :key="item.id">
				<image class="carousel"  :src="item.image"></image>
			</swiper-item> -->
			<!-- 静态展示 -->
			<swiper-item>
				<image src="../../static/carousel/batmanvssuperman.png" class="carousel"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/spiderman.png" class="carousel"></image>
			</swiper-item>
		</swiper>
		<!-- 轮播图 end -->
		<!-- 热门超英start -->
		<view class="page-block super-hot">
			<!-- 标题 -->
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png" mode="" class="hot-ico"></image>
				<view class="hot-title">热门超英</view>
			</view>
			<!-- 图片区域 可以滚动的视图组件 -->
			<scroll-view scroll-x="true" class="page-block hot">
				<!-- 一个项 动态数据但是没有权限 只能写静态的-->
				<!-- 			<view class="single-poster" v-for="item in hotSuperheroList" :key="item.id">
					<view class="poster-wapper">
								<image :src="superhero.cover" class="poster"></image>
						<view class="movie-name">	{{superhero.name}}</view>
						<!-- 星星 
								<trailer-stars  :innerScore="superhero.score" showNum="1"></trailer-stars>
					</view>
				</view> -->

				<view class="single-poster">
					<view class="poster-wapper">
						<image src="../../static/icos/star-yellow.png" class="poster"></image>
						<view class="movie-name">没权限没权限没权限没权限没权限没权限</view>
						<!-- 星星 -->
						<!-- 	<view class="movie-score-wapper">
							<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-yellow.png" class="star-ico"></image>
							<image src="../../static/icos/star-gray.png" class="star-ico"></image>
							<view class="movie-score">
								9.1
							</view>
						</view> -->
						<trailer-stars :innerScore="8.5" showNum="1"></trailer-stars>
					</view>
				</view>

			</scroll-view>
		</view>
		<!-- 热门超英end -->
		<!-- 热门预告 start-->
		<!-- 标题和超英一样的 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">
					热门预告
				</view>
			</view>
		</view>
		<!-- 视频 -->
		<view class="hot-movies page-block">
			<!-- 视频设置背景图片 + src图片路径 -->
			<video v-for="trailer in hotTrailerList" :src="trailer.trailer" :poster="trailer.poster" class="hot-movie-single"
			 controls></video>

		</view>
		<!-- 热门预告 end>-->
		<!-- 猜你喜欢 start  标题一样 可以封装成一个组件 之后进行传递图片 和文本就好-->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">
					猜你喜欢
				</view>
			</view>
		</view>
		<!-- 一个大盒子就是一项 分图片 + 介绍内容 + 点赞 利用flex布局 -->
		<view class="single-like-movie">
			<image src="http://122.152.205.72:88/superhero/DC/GreenLantern/cover.jpg" class="like-movie"></image>
			<view class="movie-desc">
				<view class="movie-title">
					蝙蝠侠大战超人蝙蝠侠大战超人蝙蝠侠大战超人
				</view>
					<trailer-stars :innerScore="5.5" showNum="0"></trailer-stars>
				<view class="movie-info">
					2018 / 美国 / 科幻 动作
				</view>
				<view class="movie-info">
					本·阿弗莱克 / 亨利·卡维尔 / 艾米·亚当斯 / 盖尔·加朵
				</view>
			</view>

			<view class="movie-oper" >
				<image src="../../static/icos/praise.png" class="praise-ico"></image>
				<view class="praise-me">
					点赞
				</view>
			<!-- 	<view class="praise-me animation-opacity">
					+1
				</view> -->
			</view>
		</view>
		<!-- 猜你喜欢 end -->
	</view>
</template>

<script>
	import trailerStars from "../../components/trailerStars.vue";

	export default {
		components: {
			trailerStars
		},
		data() {
			return {
				//轮播图数据
				carouselList: [],
				//超英预告
				hotSuperheroList: [],
				//热门预告
				hotTrailerList: []
			}
		},
		onLoad() {
			// serverUrl 挂载在vue原型上的 这样就需要this指向了
			//获取轮播图数据 
			uni.request({
				url: this.serverUrl + '/index/carousel/list',
				method: "POST",
				success: (res) => {
					// 获取真实数据之前，务必判断状态是否为200  接口权限被拒！！
					if (res.data.status == 200) {
						this.carouselList = res.data.data
					}
				}
			})
			//获取超英预告数据
			uni.request({
				url: this.serverUrl + '/index/movie/hot?type=superhero', //要传递query参数 就是拼接的参数 
				method: "POST",
				success: (res) => {
					// console.log(res.data);
					// 获取真实数据之前，务必判断状态是否为200
					if (res.data.status == 200) {
						this.hotSuperheroList = res.data.data;
					}

				}
			});

			// 查询热门预告
			uni.request({
				url: this.serverUrl + '/index/movie/hot?type=trailer',
				method: "POST",
				success: (res) => {
					// 获取真实数据之前，务必判断状态是否为200
					if (res.data.status == 200) {
						this.hotTrailerList = res.data.data;
					}

				}
			});
		},
		methods: {

		}
	}
</script>

<style>
	@import url("index.css");
</style>
